// import store from "./store";
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from './store/actions'
import Test from './components/Test'
// 目标：用 Redux 来操作数据
const App = () => {
  // !#3 获取 Store 中的数据，接收函数，函数参数代表所有的状态，返回值就表示需要返回的状态
  const state = useSelector((state) => state)
  // !#4 使用 useDispatch hook 生成 dispatch
  const dispatch = useDispatch()
  return (
    <div>
      <h3>{state}</h3>
      <Test />
      <div>
        {/* 通过 store 实例派发（dispatch）action，通知 reducer 执行，reducer 执行后会把处理完后的结果给 store */}
        {/* 通过调用 actionCreator => increment 生成了一个 action */}
        <button onClick={() => dispatch(increment(1))}>+1</button>
        <button onClick={() => dispatch(increment(5))}>+5</button>
        <button onClick={() => dispatch(decrement(5))}>-5</button>
        <button onClick={() => dispatch(decrement(1))}>-1</button>
      </div>
    </div>
  )
}
export default App